<template>
  <view class="m-content">
    <view class="m-card">
      <z-swiper v-model="state.list" :options="state.options">
        <z-swiper-item v-for="(item,index) in state.list" :key="index">
          <image :src="item" class="image" mode="aspectFill">
          </image>
        </z-swiper-item>
      </z-swiper>
    </view>

    <view class="m-box">
      <view v-for="index in 8" class="box-item">
        <view class="item-left">
          <u-icon color="#ffffff" label="发说说" labelColor="#ffffff" name="plus-circle" size="40" space="20px"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {useStore} from "@/pinia/user";
import {getPhotoById} from "@/pages/api/message/message";

const store = useStore()

const state = reactive({
  options: {
    effect: 'panorama',
    slidesPerView: 1.5,
    centeredSlides: true,
    loop:true,
    panorama: {
      depth: 150,
      rotate: 45,
    },
  },
  list: [
  ],
  colorList:['#1cbcb4','#0081ff','#6739b6']

})
const getPhotoList=()=>{
  getPhotoById(12138).then(({data})=>{
    state.list=[...data]
  })
}
onMounted(()=>{
  getPhotoList()
})
</script>

<style lang="scss" scoped>

.m-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-image: url("https://yanglelelele.vip/myblog/small/%E7%88%B1%E6%80%9D%E5%A3%81%E7%BA%B8_370064.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  .m-card {
    width: 90%;
  }
  .m-box{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    .box-item{
      margin-top: 20rpx;
      width: 150px;
      height: 80px;
      background-color: burlywood;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      .item-left{
        margin-left: 10rpx;
        color: white;
      }
    }

  }

}
.image {
  height: 400rpx;
  width: 100%;
}
</style>